<template>
  <div class="q-pa-md">
    <t-uploader
      url="http://localhost:4444/upload"
      label="Custom header"
      multiple
    >
      <template v-slot:header="scope">
        <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
          <t-btn
            v-if="scope.queuedFiles.length > 0"
            icon="clear_all"
            @click="scope.removeQueuedFiles"
            round
            dense
            flat
          >
            <t-tooltip>Clear All</t-tooltip>
          </t-btn>
          <t-btn
            v-if="scope.uploadedFiles.length > 0"
            icon="done_all"
            @click="scope.removeUploadedFiles"
            round
            dense
            flat
          >
            <t-tooltip>Remove Uploaded Files</t-tooltip>
          </t-btn>
          <t-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
          <div class="col">
            <div class="q-uploader__title">Upload your files</div>
            <div class="q-uploader__subtitle"
              >{{ scope.uploadSizeLabel }} /
              {{ scope.uploadProgressLabel }}</div
            >
          </div>
          <t-btn
            v-if="scope.canAddFiles"
            type="a"
            icon="add_box"
            @click="scope.pickFiles"
            round
            dense
            flat
          >
            <t-uploader-add-trigger />
            <t-tooltip>Pick Files</t-tooltip>
          </t-btn>
          <t-btn
            v-if="scope.canUpload"
            icon="cloud_upload"
            @click="scope.upload"
            round
            dense
            flat
          >
            <t-tooltip>Upload Files</t-tooltip>
          </t-btn>

          <t-btn
            v-if="scope.isUploading"
            icon="clear"
            @click="scope.abort"
            round
            dense
            flat
          >
            <t-tooltip>Abort Upload</t-tooltip>
          </t-btn>
        </div>
      </template>
    </t-uploader>
  </div>
</template>
